<template>
  <section v-loading="loading">
      <el-tabs value="first">
        <el-tab-pane label="添加分类" name="first">
          <el-row style="display: flex;flex-direction: row">
            <el-col :span="6">
              <el-input size="mini" v-model="newTitle"  @keydown.native.prevent.enter="addNew(currRows[0],newTitle)" placeholder="请输入标题"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 10px">
              <el-button size="mini" @click="addNew(currRows[0],newTitle)">添加</el-button>
            </el-col>
          </el-row>
          <el-table :data="currRows[0].detail">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="标题" prop="title">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.title" v-if="scope.row.edit"></el-input>
                <span v-if="!scope.row.edit">{{scope.row.title}}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <el-input v-if="scope.row.edit" v-model="scope.row.ps" size="mini"></el-input>
                <span v-if="!scope.row.edit">{{scope.row.ps}}</span>
              </template>
            </el-table-column>
            <el-table-column label="内容">
              <template slot-scope="scope">
                <el-button size="mini" @click="setDetail(scope.row)" :disabled="!scope.row.edit">设置</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                <el-button @click='scope.row.edit = !scope.row.edit' size="small" :type="scope.row.edit=== true?'success':'primary'">{{scope.row.edit=== true?'完成':'编辑'}}</el-button>
                <el-button @click='del(scope,currRows[0].detail)' size="small" v-if="!scope.row.edit" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="添加内容" name="second">
          <el-form label-width="80px">
            <el-form-item :label="'搜索'">
              <el-select v-model="currRows[0].sel"  :filterable="true" remote :reserve-keyword="false"
                         default-first-option  placeholder="请输入关键词" :collapse-tags="true"
                         :remote-method="remoteMethod" multiple value-key="name"
                         size="mini" >
                <el-option v-for="(sth,index) in allArray" :key="index" :label="sth.name" :value="sth" v-if="allArray">
                  <span style="float: left">{{sth.name}}-{{sth.id}}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{sth.type}}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="已选">
              <el-tag v-for="f in currRows[0].sel" :key="f.code" closable @close="handleClose(currRows[0].sel,f)" style="margin-right: 10px">
                {{f.name}}
              </el-tag>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-button @click="handleSaveCurrItmes" size="mini" type="success">完成</el-button>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "selectDetail",
    props: ['currRows'],
    data() {
      return {
        loading:false,
        newTitle:null,
        allArray:null
      }
    },
    created() {
      console.log(this.currRows)
    },
    mounted() {
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addNew(p,t){
        console.log(p)
        let tmp={title:t,sel:[],ps:'',edit:true,detail:[]}
        p.detail.push(tmp)
        this.newTitle=null
      },
      del(scope,detail){
        detail.splice(scope.$index,1)
        console.log(scope)
      },
      setDetail(row){//添加内容
        Vue.set(row,'showDialog',true)
        this.currRows.unshift(row)
      },
      handleSaveCurrItmes(){
        this.currRows.splice(0,1)

      },
      remoteMethod(key) {
        if(key !==''){
          this.loading=true
          //搜索食物，运动，穴位
          this.allArray=[]
          console.log('开始搜索')
          this.getFilterFoodList(key)
          this.getSportList(key)
          this.getAcupointList(key)
          this.getDiseaseList(key)
        }else {
          console.log('key不能为空')
        }
      },
      getDiseaseList(key){
        this.fetch({name:"getDiseaseList",data:{key}})
          .then(res=>{
            console.log(res.content)
            res.content.forEach(r=>{
              let tmp={type:'disease',name:r.name,id:r.id}
              this.allArray.push(tmp)
            })
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getFilterFoodList(key){
        this.fetch({name:"getFoodList",data:{key}})
          .then(res=>{
            console.log(res.content)
            res.content.forEach(r=>{
              let tmp={type:'food',name:r.name,id:r.id}
              this.allArray.push(tmp)
            })
            // this.filterFoodList = res.content
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getAcupointList(key){
        this.fetch({name:"getAcupointList",data:{key}})
          .then(res=>{
            console.log(res.content)
            res.content.forEach(r=>{
              let tmp={type:'acupoint',name:r.name,id:r.id}
              this.allArray.push(tmp)
            })
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getSportList(key){
        this.fetch({name:"getSportList",data:{key}})
          .then(res=>{
            console.log(res.content)
            res.content.forEach(r=>{
              let tmp={type:'sport',name:r.name,id:r.id}
              this.allArray.push(tmp)
            })
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
